<template>
  <div id="map"><div id="mouse-position"></div></div>
</template>

<script setup>
import "./OpenControls.css";
// 导入天地图
import {
  // 天地图矢量图层
  TiandiMap_vec,
  // 天地图影像图层
  TiandiMap_img,
  // 天地图矢量注记图层
  TiandiMap_cva,
  // 天地图影像注记图层
  TianDiMap_cia,
} from "../../libs/mapBase";
import { app } from "../../main";

// let docLayer=null;
// 在onMounted上设置地图相关信息,设置了自动导包,可不用导入onMounted
onMounted(() => {
  const map = new ol.Map({
    target: "map",
    // 设置地图图层
    layers: [TiandiMap_img, TiandiMap_vec, TiandiMap_cva, TianDiMap_cia],
    // view设置地图,为坐标,中心点,放大级别
    view: new ol.View({
      center: [114.38, 30.495],
      zoom: 13,
      // 经纬度坐标系
      projection: "EPSG:4326",
    }),
  });
  // 全局挂载map
  app.provide("$map", map);
});
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: calc(100vh - 70px);
  position: absolute;
  bottom: 0;
  left: 0;
  :deep(.ol-viewport) {
    .ol-tooltip {
      position: relative;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      color: white;
      padding: 4px 8px;
      opacity: 0.7;
      white-space: nowrap;
    }

    .ol-tooltip-measure {
      opacity: 1;
      font-weight: bold;
    }

    .ol-tooltip-static {
      background-color: #0099ff;
      color: black;
      border: 1px solid white;
    }

    .ol-tooltip-measure:before,
    .ol-tooltip-static:before {
      border-top: 6px solid rgba(0, 0, 0, 0.5);
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      content: "";
      position: absolute;
      bottom: -6px;
      margin-left: -7px;
      left: 50%;
    }

    .ol-tooltip-static:before {
      border-top-color: #0099ff;
    }
  }
}
</style>
